<template>
	<!-- 案例分析和完型填空编辑共用 -->
	<div>
		<el-form-item
			:label="label"
			prop="questionTitle"
			:rules="{
				required: true,
				message: message,
				trigger: ['blur', 'change']
			}"
		>
			<template>
				<el-input v-model.trim="questionForm.questionTitle" maxlength="2000">
					<i
						slot="suffix"
						@click="handleEdit(questionForm.questionTitle,'questionTitle')"
						class="el-icon-edit-outline icons"
					/>
				</el-input>
				<span v-if="questionForm.questionType==='CF'" class="tips m-t15">Tips：完形填空题需要在题干的每个填空处放上（）</span>
			</template>
		</el-form-item>
		<base-edit-table
			:list="smallQuestionList"
			:parent-type="questionType"
			:basic-info="basicInfo"
			:tag-info="tagInfo"
			@sub-change="subChange"
			@del-sub="deleteSub"
		/>
	</div>
</template>
<script>
   import BaseEditTable from "@rc/pages/components/question-base/base-edit-table.vue";
	export default {
		name: "q-case-analysis-edit",
        components:{
            BaseEditTable
        },
		props: {
			value: {
				type: Object,
				default: () => {}
			},
            basicInfo: {
				type: Object,
				default: () => {}
			},
			tagInfo: {
				type: Object,
				default: () => {}
			},
            // 题型
            questionType:{
                type:String,
                default:"S"
            },
		},
		data() {
			return {
				questionForm: {},
                label:'题干',
                message:'请输入题干',
                smallQuestionList:[]

			};
		},
		watch: {
			value: {
				immediate: true,
				deep: true,
				handler(val) {
					this.questionForm =  JSON.parse(JSON.stringify(val));
                    if(!val.smallQuestionList) {
                        this.smallQuestionList = [];
                        this.$set(this.questionForm,'smallQuestionList',[]);
                    } else {
                        this.smallQuestionList = val.smallQuestionList;
                    }
                    if(!val.smallResourceIds){
                        this.$set(this.questionForm,'smallResourceIds',[]);
                    }
                    if(val.questionType==='A'){
                       this.label='背景材料';
                       this.message='请输入背景材料';
                    }
				}
			},
            questionForm:{
                immediate:true,
				deep: true,
                handler(val){
                    this.$emit('change',val);
                }
            }
		},
		methods: {
			// 编辑
			handleEdit(value, key, index) {
				this.$emit("edit", value, key, index);
			},
            subChange(list){
                this.$set(this.questionForm,'smallQuestionList',list);
            },
            //存储被删除的子题id
            deleteSub(deleteResourceIds){
                this.$set(this.questionForm,'smallResourceIds',deleteResourceIds);
            },
            //获取题干中的（）数量
			getBracketsNum(str) {
				let BracketsNum = 0;
				str.replace(/（\s*\)|\(\s*）|\(\s*\)|（\s*）/g, () => {
					// 索引
					BracketsNum++;
				});
				return BracketsNum;
			},
            // 校验子题选择
            api_checkAnswer(){
                const { questionType,questionTitle,smallQuestionList } = this.questionForm;
                if(questionType==='CF'){
                    if (!this.getBracketsNum(questionTitle)) {
                        this.$message.warning("题干必须包含（）");
                        return false;
				    }
                	if (!smallQuestionList || this.getBracketsNum(questionTitle) !== smallQuestionList.length) {
                        this.$message.warning("完形填空题的填空数量和子题数量必须一致");
                        return false;
				    }
                }
                return  true;
            },
		}
	};
</script>
<style scoped lang="less">
	/deep/ .icons {
		cursor: pointer;
		font-size: 20px;
		margin-top: 7px;
	}
    .tips {
		color: #666;
		font-size: 12px;
		line-height: 20px;
		display: block;
        margin-top: 10px;
	}
</style>
